<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="作业.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 20px;
        }

        table {
            width: 1000px;
            margin: 50px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px lightblue solid;
            text-align: center;
        }

        button {
            margin: 5px;
        }

        .box {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 9;
        }

        .alert {
                width: 300px;
                height: 400px;
                background-color: skyblue;
                position: fixed;
                border: solid 2px: orange;
                border-radius: 10px;
                text-align: center;
                line-height: 400px;
                font-size: 26px;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 10;
        }

        #quedel {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="alert">
            确定删除吗？
            <button type="button" id="quedel">确定</button>
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>kky1</td>
                <td>15</td>
                <td>男</td>
                <td>学习</td>
                <td><button class="shang">上移</button><button class="del">删除</button><button class="xia">下移</button></td>
            </tr> -->
        </tbody>
    </table>

    <script>
        var tbody = document.querySelector("tbody");
        if (localStorage.obj2019) {
            var arr = JSON.parse(localStorage.obj2019).arr1;
            localStorage.arr = JSON.stringify(arr);
            show(arr);
        }
        function show(arr) {
            var str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                    <tr>
                    <td>${i + 1}</td>
                    <td>${arr[i].name}</td>
                    <td>${arr[i].age}</td>
                    <td>${arr[i].sex}</td>
                    <td>${arr[i].aihao}</td>
                    <td>
                        <button onclick="shang(${arr[i].id})">上移</button>
                        <button onclick="del(${arr[i].id})">删除</button>
                        <button onclick="xia(${arr[i].id})">下移</button>
                    </td>
                </tr>
                `
            }
            tbody.innerHTML = str;
        }
        //下移
        var abc = {};
        var a;
        function xia(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    if (i == arr.length - 1) {
                        this.disabled = true;
                    } else {
                        a = i + 1;
                        abc = arr[i];
                        arr[i] = arr[a];
                        arr[a] = abc;
                        localStorage.arr = JSON.stringify(arr);
                        show(arr);
                        break;
                    }
                }
            }
        }
        //上移
        var bcd = {};
        var b;
        function shang(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    if (i == 0) {
                        this.disabled = true;
                    } else {
                        a = i - 1;
                        abc = arr[i];
                        arr[i] = arr[a];
                        arr[a] = abc;
                        localStorage.arr = JSON.stringify(arr);
                        show(arr);
                        break;
                    }
                }
            }
        }
        //删除
        var box = document.querySelector('.box');
        var quedel = document.querySelector('#quedel');
        var alert = document.querySelector('.alert');
        function del(id) {
            box.style.display = "block";
            quedel.onclick = function () {
                for (var i = 0; i < arr.length; i++) {
                    if (id == arr[i].id) {
                        arr.splice(i, 1);
                    }
                }
                localStorage.arr = JSON.stringify(arr);
                show(arr);
                box.style.display = "none";
            }
        }
        (function () {
    arr1 = [
        {
            id: 12345,
            xihao: "1",
            name: "kky",
            age: "15",
            sex: "男",
            aihao: "学习"
        }, {
            id: 23456,
            xihao: "2",
            name: "kky2",
            age: "15",
            sex: "男",
            aihao: "追剧"
        }, {
            id: 34567,
            xihao: "3",
            name: "kky3",
            age: "15",
            sex: "男",
            aihao: "看小说"
        }, {
            id: 45678,
            xihao: "4",
            name: "kky4",
            age: "15",
            sex: "男",
            aihao: "打游戏"
        }, {
            id: 56789,
            xihao: "5",
            name: "kky5",
            age: "15",
            sex: "男",
            aihao: "敲代码"
        }
    ]
    var obj2019 = {
        arr1: arr1
    }
    if (!localStorage.obj2019) {
        localStorage.obj2019 = JSON.stringify(obj2019);
    }
}());
    </script>
</body>

</html>